<script setup lang="ts">

import type {Post} from "@/net/controller/post-controller.ts";
import {ChatLineSquare, Star, View} from "@element-plus/icons-vue";
import {stripHtml} from "../utils/string-utils.ts";

const props = defineProps<{
  post: Post
}>()

</script>

<template>
  <main class="post-card flex flex-vertical">
    <p>
      <el-link class="section-title" :href="'/post/' + props.post.postId" target="_blank">
        {{ props.post.title }}
      </el-link>
    </p>

    <p class="content">{{ stripHtml(props.post.content.slice(0, 120)) + '......' }}</p>

    <div class="flex flex-horizontal" style="gap: .5rem">
      <div class="icon-box flex flex-horizontal flex-center-vertically">
        <View class="icon" style="margin-right: .25rem" />{{ props.post.viewCount}} 阅读
      </div>
      <div class="icon-box flex flex-horizontal flex-center-vertically">
        <Star class="icon" style="margin-right: .25rem" />{{ props.post.viewCount}} 赞
      </div>
      <div class="icon-box flex flex-horizontal flex-center-vertically">
        <ChatLineSquare class="icon" style="margin-right: .25rem" />{{ props.post.viewCount}} 评论
      </div>
    </div>
  </main>
</template>

<style scoped>
.post-card {
  padding: 1rem 0;
  border-bottom: 1px solid #999;
}

.icon-box {
  color: #999;
}

.icon {
  width: 16px;
  height: 16px;
}

.section-title {
  font-size: 18px;
}

.content {
  color: #999;
}
</style>